<template>
  <div class="h100p pb44">
    <!--banner-->
    <div class="w100p h375">

      <div class="edit_banner bgfff trans2" :class="changeing ? 'fade' : '' " v-if="imgUrls.length > 0">
        <swiper class="swiper-inner" :indicator-dots="indicator" :current="cur" @change="swiperChange"
                :circular="circular">
          <block v-for="(item,index) in imgUrls" :index="index" :key="key">
            <swiper-item>
              <img class="banner-img" :src="item" mode="widthFix"/>
              <div class="tags">
                            <span class="w30 h30 del disflex align-cen jscen mb10" @click="delBanner(index)">
                                <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/del.png" alt=""
                                                  class="w17 h17" />
                            </span>
                <span class="posre w30 h30 add disblock" @click="uploadpic(index)"></span>
              </div>
            </swiper-item>
          </block>
        </swiper>
        <!--重置小圆点的样式  -->
        <view class="dots">
          <block v-for="(item,index) in imgUrls" :index="index" :key="key">
            <view class="dot" :class="{'active':  index == cur}"></view>
          </block>
        </view>
        <!--重置小圆点的样式 end -->
      </div>

      <div v-else class="w100p h100p bgfff borderbox  textc pt123" @click="uploadpic(-1)">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/VR.png" alt=""
                          class="w100 h100 mb5" />
        <p class="fs14 ca8">点击添加图片</p>
      </div>

      <canvas style="width: 500px;height: 500px;position: fixed;bottom: -4000px;z-index: -100"
              canvas-id="Canvas"></canvas>

    </div>


    <div class="mb10 bgfff pl15 pr15 disflex jsbet" @click="choose_class_show_tap">
      <div class="disflex align-cen">
        <span class="corange posre pr8 top3">*</span>
        <span class="fs14 c38">商品分类</span>
      </div>
      <div class="disflex align-cen">
        <input type="text" disabled class="fs14 pha8 textr pr12 lh44 h44" v-model="prodChooseClass"
               placeholder="请选择商品分类">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/right.png" alt=""
                          class="w10 h10" />
      </div>
    </div>

    <div class="bgfff pt13 pl13 pr18 pb15 mb10" @click="goodsNameIsFocus=true">

            <textarea class="fs14 pha8 h30"
                      maxlength="20"
                      @change="reset_text(this)"
                      @keydown="reset_text(this)"
                      @keyup="reset_text(this)"
                      v-model="prod_name"
                      @blur="goodsNameIsFocus=false"
                      :focus="goodsNameIsFocus"
                      placeholder="请输入商品名称"></textarea>
      <div class="textr fs12 ca8">{{prod_name.length}}/{{counter}}</div>

    </div>

    <!--产品类型-->
    <div class="bgfff fs14 ca8 mb10" v-for="(v,k) in prodSize" :key="v">
      <div class="lh44 disflex jsbet align-cen  pl16 pr15">
        <input type="text" placeholder="请输入产品类型名称" class="pha8 lh44 h44 fs14 ca8 pha8" v-model="v.name">
        <div class="disflex align-cen">
          <span @click="delSize(k)">
            <img src="product-index/20190425173426.png"
                              alt="" class="w20 h20"
                               />
          </span>
          <span  v-if="v.specId" @click="confirm(k)">
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/check.png"
                                alt="" class="w20 h20 ml29"
                                />
          </span>
          <span v-else @click="confirm(k)">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/no_check.png"
                              alt="" class="w20 h20 ml29"
                              />
          </span>
        </div>
      </div>

      <div class="pl16 pr15 bbf7 disflex jsbet lh44 posre" v-for="(size,index) in v.size" :key="index">
        <div class="disflex align-cen">
          <span class="mr16">规格</span>
          <input type="text" class="pha8 lh44 h44 fs14 c38 pha8 w40" placeholder="默认" v-model="size.name">
        </div>
        <div class="disflex align-cen">
          <span class="mr16">库存</span>
          <input type="digit" class="pha8 lh44 h44 fs14 c38 pha8 w40" placeholder="0"
                 v-model="size.inventory">
        </div>
        <div class="disflex align-cen">
          <span class="mr16">价格</span>
          <span class="corange">￥</span>
          <input type="digit" class="phorange lh44 h44 fs14 corange pha8 w40" placeholder="0"
                 v-model="size.price">
        </div>
        <div class="disflex align-cen w60 row-reverse" :class="index > 0 ? 'jsaround' : ''">

          <span v-if="size.specId || size.isSave" @click="confirm(k , index)">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/check.png"
                              alt="" class="w20 h20"
                               />
          </span>
          <span v-else @click="confirm(k, index)">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/no_check.png"
                              alt="" class="w20 h20"
                              />
          </span>
          <span @click="delSize(k,index)" v-if="index > 0">
            <img src="product-index/20190425173426.png"
                              alt="" class="w20 h20"
                               />
          </span>
        </div>
      </div>
      <p class="pl16 lh44" @click="addSize(k)">添加产品规格</p>

    </div>

    <p class="lh44 textc fs14 ca8 bgfff mb10" @click="addType">添加产品类型</p>

    <div class="mb10 bgfff fs14 ca8">

      <div class="disflex align-cen lh44 posre pl42">
        <label class="checkBox" :class=" online_pay ? 'active' : '' "
               @click="online_pay = !online_pay">
          <span></span>
        </label>
        <span class="c38 pl11">在线支付</span>
      </div>

    </div>

    <div class="bgfff textc fs14 ca8 pb36 mb44">
      <p class="lh44 pb25">产品详情</p>
      <span class="disinblock cblue bblue lh30 bradius5 pl11 pr11 mb10"
            @click="page_turn('companyIntro' , '?type=prod')">
                {{isControlChange&&goodsId ? '重置内容' : '添加内容'}}
            </span>
      <div v-if="editOperator" v-html="editOperator">
        <!--<div v-for="(v,k) in editOperator" v-html="v"></div>-->
      </div>


    </div>

    <!--添加商品分类-->
    <div v-if="chooseClassShow">
      <SelectorOne
        :title="'选择商品分类'"
        :status="chooseClassShow"
        :allClass="prodClass"
        :choose_id="choose_class_id"
        @closeModal="chooseClassShow=false"
        @choose_tap="choose_tap"></SelectorOne>
    </div>

    <!--bottom-->
    <BottomButtonTwo :left="bottom.left" :right="bottom.right" @page_turn="bottom_tap"></BottomButtonTwo>
  </div>
</template>

<script>
  import BottomButtonTwo from '@/components/bottom_button_two' // 订单项
  import SelectorOne from '@/components/selectorOne' // 订单项
  import StaticResources from '@/components/StaticResources';

  import util from '../../utils/index'
  import WXAJAX from '../../utils/request'
  var app = getApp();
  export default {
    name: '',
    components: {StaticResources, BottomButtonTwo, SelectorOne},
    data() {
      return {
        prod_name: '',
        text_length: 0,
        counter: 60,
        online_pay: true,
        bottom: {
          left: {
            text: '预览', url: 'preview'
          },
          right: {
            text: '保存', url: 'save'
          }
        },
        chooseClassShow: false,
        prodClass: [{id:'manage', name: '管理分类'}],
        prodChooseClass: '',
        choose_class_id: 0,
        /*banner*/
        indicator: false, //是否显示指示点
        interval: 5000,  //自动切换时间间隔
        duration: 400,  //滑动动画时长
        autoplay: true, //是否自动切换
        circular: true, //是否采用衔接滑动
        cur: 0,         //当前所在滑块的index
        imgUrls: [],
        changeing: false,//是否在选择切换图片
        prodSize: [],//产品规格
        editOperator: '',//产品详情
        isCanSee: false,
        goodsNameIsFocus: false,
        goodsId: '',
        isControlChange: false,
      }
    },
    watch: {
      prod_name: function (newVal, oldVal) {
        if (newVal.length > 60) {
          this.intro = this.intro.slice(0, 60)
        }
      },

    },
    mounted() {

    },
    async onPullDownRefresh() {
      wx.stopPullDownRefresh();
    },
    onShow() {
      let { goodsId, type } = this.$root.$mp.query;
      this.isControlChange = wx.getStorageSync('isControlChange');

      if (this.isControlChange) {
        if (type == 'add') {
          this.prod_name = '';
          this.text_length = 0;
          this.imgUrls = [];
          this.prodSize = [];
          this.editOperator = '';
          this.isCanSee = false;
          this.goodsId = '';
        }

        if (goodsId) {
          this.goodsId = goodsId;
          this.getGoodsInfo(goodsId);
        }

        wx.removeStorageSync('isControlChange');
      }

      this.getInits();
      this.editOperator = wx.getStorageSync('editOperator') || '';
    },
    methods: {
      getInits() {
        wx.showLoading();
        WXAJAX.POST('', '', '/goods/getGoodsTypeInfo').then((data, code) => {

          wx.hideLoading();
          if(data){
            data.forEach(function (i, k) {
              i.id = i.goodstypeId;
            });
            this.prodClass = [{id:'manage', name: '管理分类'},...data];
          }else if( code != 209){
            this.prodClass = [{id:'manage', name: '管理分类'}];
          }

        }).catch((err) => {
          wx.hideLoading();
        });
      },
      getGoodsInfo(id){
        wx.showLoading();
        WXAJAX.POST({
          goodsId: id,
        }, '', '/goods/getGoodsInfo').then((data, code) => {
          wx.hideLoading();
          if (data) {
            data = data[0];
            this.prod_name = data.goodsName;
            this.choose_class_id = data.goodstypeId;
            this.editOperator = data.goodsDetails;
            this.online_pay = data.ispayment == 1;
            this.prodChooseClass = data.goodsTypeName;
            this.prodSize = data.goodSpecModelList ? data.goodSpecModelList.map(val=>{
              return {
                name: val.specName,
                specId: val.specId,
                size: val.goodSpecModelList ? val.goodSpecModelList.map(item=>{
                  return {
                    name: item.specAttribute,
                    inventory: item.specNum,//库存
                    price: item.price/100,
                    specId: item.specId,
                  }
                }) : []
              }
            }) : [];
            this.imgUrls = data.goodPhoto ? data.goodPhoto.split(',') : [];
          }
          console.log(data);
        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });
      },
      reset_text(_obj) {
        this.text = _obj.value.substring(0, 60);
        this.text_length = this.text.length;
      },
      page_turn(url, query) {
        query = query || '';
        wx.navigateTo({url: '../' + url + '/main' + query})
      },
      bottom_tap(method) {
        if (method == 'preview') {
          if (!this.isCanSee) {
            wx.showToast({
              title: '请先保存！',
              icon: 'none'
            });
            return
          }
          /*跳转到用户端小程序的产品详情页面，隐藏产品详情页面所有可以跳转的按钮*/

        } else {//保存
          if (this.imgUrls.length == 0) {
            wx.showToast({
              title: '请选择商品图片！',
              icon: 'none'
            });
            return
          }
          if (this.choose_class_id == 0) {
            wx.showToast({
              title: '请选择商品分类！',
              icon: 'none'
            });
            return
          }
          if (!this.prod_name) {
            wx.showToast({
              title: '请输入商品名称！',
              icon: 'none'
            });
            return
          }
          if (this.prodSize.length == 0 ||
            this.prodSize[0].specId == 0 ||
            this.prodSize[0].size[0].specId == 0) {
            wx.showToast({
              title: '请至少输入一种商品类型和规格！',
              icon: 'none'
            });
            return
          }

          let specIds = [],
            v = this;
          v.prodSize.forEach(function (i, k) {
            if (i.specId > 0) {
              specIds.push(i.specId)
            }
            i.size.forEach(function (i2, k2) {
              if (i2.specId > 0) {
                specIds.push(i2.specId)
              }
            })
          });
          wx.showLoading();

          WXAJAX.POST({
            goodsName: this.prod_name,
            goodstypeId: this.choose_class_id,
            goodsDetails: this.editOperator,
            ispayment: this.online_pay ? 1 : 2,
            specIds: specIds.join(','),
            goodPhoto: v.imgUrls.join(','),
            goodsId: this.goodsId || '',
          }, '', '/goods/addGoodsInfo').then((data) => {

            wx.hideLoading();
            wx.showToast({
              title: '成功！',
              icon: 'success'
            });
            v.isCanSee = true;
            setTimeout(function () {
              v.clearData();
              wx.navigateBack();
            }, 600);
          }).catch((err) => {
            console.log(err);
            wx.hideLoading();
          });
        }


      },
      choose_class_show_tap() {
        this.chooseClassShow = !this.chooseClassShow;
      },
      choose_tap(id, i) {
        if(id == 'manage'){
          this.page_turn('classifyControl');
          return;
        }

        if (id == -1) return;
        this.choose_class_id = id;
        this.prodChooseClass = i;
        this.chooseClassShow = !this.chooseClassShow;
      },
      delBanner(index) {//删除banner图片
        this.changeing = true;
        let v = this;
        setTimeout(function () {
          v.imgUrls.splice(index, 1);
          v.changeing = false;
        }, 400)
      },
      async uploadpic(str) {
        if (this.imgUrls.length >= 5) {
          wx.showToast({
            title: '最多选择五张！',
            duration: 1500,
            icon: 'none'
          });
          return
        }
        let path = await util.chooseImage('file');
        if(!(path instanceof Array)) return;
        this.uploadImg(path[0], str);
      },
      uploadImg(path, str) {
        let v = this;
        wx.showLoading();

        WXAJAX.UploadImage(path).then((data) => {
          wx.hideLoading();
          data = JSON.parse(data);

          if (data.code == '200') {
            this.imgUrls.push(WXAJAX.imgBackUrl + data.data);
            this.changeing = false;
          } else {
            wx.showToast({
              title: '服务器繁忙',
              duration: 2000,
              icon: 'none'
            })
          }
        }).catch((err) => {
          wx.hideLoading();
          console.log('err -- ', err);
        })

      },
      addType() {//添加产品类型
        wx.showLoading();
        this.prodSize.push({
          name: '',
          specId: 0,
          size: [
            {
              name: '',
              inventory: '',//库存
              price: '',
              specId: 0,
            }
          ]
        });
        setTimeout(function () {
          wx.hideLoading();
        }, 200)
      },
      addSize(index1) {//添加规格
        wx.showLoading();

        this.prodSize[index1].size.push({
          name: '',
          inventory: '',//库存
          price: '',
          specId: 0,
        });
        setTimeout(function () {
          wx.hideLoading();
        }, 200)
      },
      delSize(index1, index2) {
        if (index2 >= 0) {
          if (this.prodSize[index1].size[index2].specId == 0) {
            wx.showLoading();
            this.prodSize[index1].size.splice(index2, 1);
            setTimeout(function () {
              wx.hideLoading();
            }, 200);

            return
          }
        } else {
          if (this.prodSize[index1].specId == 0) {
            this.prodSize.splice(index1, 1);
            return
          }
        }

        wx.showLoading();
        let v = this,
          specId = 0;

        if (index2 >= 0) {
          specId = v.prodSize[index1].size[index2].specId;
        } else {
          specId = v.prodSize[index1].specId;
        }
        WXAJAX.POST({
          specId: specId,
        }, '', '/goods/delGoodSpecInfo').then((data) => {

          wx.hideLoading();
          if (index2 >= 0) {
            this.prodSize[index1].size.splice(index2, 1);
          } else {
            this.prodSize.splice(index1, 1);
          }
          wx.showToast({
            title: '成功！',
            icon: 'none'
          });
        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });

      },
      confirm(index1, index2) {//保存规格
        let list = this.prodSize[index1],
          params = {},
          url = '';
        url = '/goods/addGoodSpecInfo';

        if (index2 >= 0) {//二级
          if (list.specId == 0) {
            wx.showToast({
              title: '请先保存产品类型名称！',
              icon: 'none'
            });
            return
          }

          if (!list.size[index2].name) {
            wx.showToast({
              title: '请输入规格名！',
              icon: 'none'
            });
            return
          }
          if (!list.size[index2].inventory) {
            wx.showToast({
              title: '请输入库存！',
              icon: 'none'
            });
            return
          }
          if (!list.size[index2].price) {
            wx.showToast({
              title: '请输入价格！',
              icon: 'none'
            });
            return
          }

          if (list.size[index2].specId == 0) {//新增
            params = {
              specAttribute: list.size[index2].name,
              specNum: list.size[index2].inventory,
              price: (list.size[index2].price * 100).toFixed(0),
              parentId: list.specId,
            }
          } else {//编辑
            params = {
              specAttribute: list.size[index2].name,
              specNum: list.size[index2].inventory,
              price: (list.size[index2].price * 100).toFixed(0),
              parentId: list.specId,
              specId: list.size[index2].specId,
            }
          }

        } else {//一级
          if (!list.name) {
            wx.showToast({
              title: '请输入产品类型名！',
              icon: 'none'
            });
            return;
          }

          if (list.specId == 0) {//新增
            params = {
              specName: list.name,
            }
          } else {//编辑
            params = {
              specName: list.name,
              specId: list.specId,
            }
          }
        }

        wx.showLoading();
        let v = this;

        WXAJAX.POST(params, '', url).then((data) => {

          wx.hideLoading();
          if (data) {
            if (index2 == undefined) {//一级
              v.$set(v.prodSize[index1], 'specId', data);
            } else {
              v.$set(v.prodSize[index1].size[index2], 'specId', data);
            }
            wx.showToast({
              title: '成功！',
              icon: 'none'
            });
          } else {
            if (index2 || index2 === 0){
              v.$set(v.prodSize[index1].size[index2], 'isSave', true);
            }
          }
        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });
      },
      clearData() {//清空数据
        wx.showLoading();
        this.prod_name = '';
        this.text_length = 0;
        this.imgUrls = [];
        this.prodSize = [];
        this.editOperator = '';
        this.isCanSee = false;
        wx.setStorageSync('editOperator', '');
        wx.hideLoading();
      }
    }
  }
</script>

<style>

</style>


